<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>查看帖子</title>

  <!-- Bootstrap -->
    <link href="<%=request.getContextPath()%>/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/bootstrap-theme.min.css" rel="stylesheet">
    <link href="<%=request.getContextPath()%>/static/css/jumbotron.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath()%>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath()%>/static/js/respond.min.js"></script>
    <![endif]-->
    
    <script type="text/javascript">
    	function showcommentForm(){
    		
    		var commentdiv=document.getElementById("commentdiv");
    		commentdiv.innerHTML='<form class="form-horizontal" action="<%=request.getContextPath() %>/Comment/AddComment" method="post" onsubmit="return submitcommentForm();">'
  			+'<div class="form-group"><input type="hidden" id="action" name="action" value="comment"/>'
  			+'<input type="hidden" id="postingID" name="postingID" value="${item.postingid}" />'
  			+'<input type="hidden" id="commenttag" name="commenttag" value="0" />'
  			+'<textarea class="form-control" rows="5" id="commentcontent" name="commentcontent" placeholder="最多可以填写10,000个字……">'
  			+'</textarea><button type="submit" class="btn btn-success">发表评论</button>	</div></form>';
    		return true;
    	}
    	
    	function showreplyForm(commentator,commentatorusername,commentid){
    		
    		var replydiv=document.getElementById(commentid);
    		replydiv.innerHTML='<form class="form-horizontal" action="<%=request.getContextPath() %>/Comment/AddComment" '
    		+'method="post" onsubmit="return submitreplyForm('+ commentid +');">'
  			+'<div class="form-group"><input type="hidden" id="action" name="action" value="reply"/>'
  			+'<input type="hidden" id="postingID" name="postingID" value="${item.postingid}" />'
  			+'<input type="hidden" id="replytag" name="replytag" value="' + commentator + '" />'
  			+'<textarea class="form-control" rows="5" id="textarea'+commentid+ '" name="replycontent" placeholder="回复@' + commentatorusername + '">'
  			+'</textarea><button type="submit" class="btn btn-success">确认回复</button>	</div></form>';
    		return true;
    	}
    	
    	function locatecommentcursor(){
    		var comment = document.getElementById("commentcontent");
    		comment.focus();
    	}
    	
    	function locatereplycursor(commentid){
    		var reply = document.getElementById(commentid);
    		reply.focus();
    	}
    	function submitcommentForm(){

			var comment = document.getElementById("commentcontent");
			if(comment.value.length>10000){
				alert("内容超过10000，请适当精简！");
				comment.focus();
				return false;
			}
			return true;
	  }
    
    	function submitreplyForm(commentid){

			var reply = document.getElementById("textarea" + commentid);
			if(reply.value.length>10000){
				alert("内容超过10000，请适当精简！");
				reply.focus();
				return false;
			}
			return true;
	  }
    
    </script>
</head>
<body>

<jsp:include page="../Common/navHeader.jsp"></jsp:include>

	<div class="container">

	<div class="row" style="text-align:center;margin-top:51px;">
        <h1 style="font-family:华文行楷;" >好室友<small>网</small> </h1>
      <jsp:include page="/Common/SearchArea.jsp"></jsp:include>
      </div>
       
      <br/>
      <br/>   
      
	  <div class="row">
      <div class="col-xs-1"></div>
      
      <div class="col-xs-10">

      <c:if test="${item ne null }">  		
	  		
	  		<div class="panel panel-default">
  
			  <div class="panel-heading">帖子类型：【${fn:escapeXml(item.type)}】
			  		<c:if test="${author ne null }">
						<h5 style="color:#CC3300">作者：${fn:escapeXml(author.username)} &nbsp;&nbsp;发表于：${fn:escapeXml(item.timeFormatted)} &nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="showcommentForm();locatecommentcursor();return false;">评论</a></h5>
					</c:if>
					<c:if test="${author eq null }">
						<h5 style="color:#CC3300">作者:未知作者 &nbsp;&nbsp;发表于：${fn:escapeXml(item.timeFormatted)} </h5>
					</c:if>	  
			  </div>
			  <div class="panel-body">
			    ${item.content }
			  </div>
			  <c:if test="${comments ne null }">
			  		<ul class="list-group">
					  	<c:forEach var="item" items="${comments}">
					  		<li class="list-group-item">
					  			<c:if test="${item.reply ne 0 }">
			  					    <p><a href="<%=request.getContextPath()%>/Account/ShowUserDetailInfo?userid=${item.commentator}">${item.commentatorusername}</a>&nbsp;&nbsp;在&nbsp;${item.timeFormatted }&nbsp;回复了&nbsp;&nbsp;<a href="<%=request.getContextPath()%>/Account/ShowUserDetailInfo?userid=${item.reply}">${item.replyusername }</a>：<a href="#" onclick="showreplyForm(${item.commentator },'${item.commentatorusername}',${item.commentid });locatereplycursor(${item.commentid });return false;">回复</a></p>
			  						<p style="color:black; text-indent:2em">${fn:escapeXml(item.content)}</p>
			  					</c:if>
			  					<c:if test="${item.reply eq 0 }">
			  					    <p><a href="<%=request.getContextPath()%>/Account/ShowUserDetailInfo?userid=${item.commentator}">${item.commentatorusername}</a>&nbsp;&nbsp;在&nbsp;${item.timeFormatted }&nbsp;发表了评论：<a href="#" onclick="showreplyForm(${item.commentator },'${item.commentatorusername}',${item.commentid });locatereplycursor(${item.commentid });return false;">回复</a></p>
			  						<p style="color:black; text-indent:2em">${fn:escapeXml(item.content)}</p>
			  					</c:if>
			  					<div id="${item.commentid }">
			  					
			  					</div>
					  		</li>
					  	</c:forEach>
				  	</ul>
			  	</c:if>
			  	<c:if test="${comments eq null }">
			  		<div class="panel-footer">
			  			此贴目前还没有任何人评论过！
			  		</div>
			  	</c:if>
			  
		   </div>
	  		
	  		<div class="col-xs-12" id="commentdiv">	
	  		</div>  		  
      </c:if>
      <c:if test="${item eq null }">
      		<div class="row">
		  			<h3>【出错提示】没有数据，加载失败！</h3>
			</div>
      </c:if>	   
      </div>
      <div class="col-xs-1"></div>
    </div>
 
   <jsp:include page="../Common/Footer.jsp"></jsp:include>

</div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<%=request.getContextPath()%>/static/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<%=request.getContextPath()%>/static/js/bootstrap.min.js"></script>

</body>
</html>